import { faker } from "@faker-js/faker";
import dayjs from "dayjs";
import { fakeAvatars } from "@/_mock/utils";
import { AvatarGroup } from "@/components/avatar-group";
import { Icon } from "@/components/icon";
import useLocale from "@/locales/use-locale";
import { Avatar, AvatarImage } from "@/ui/avatar";
import { Badge } from "@/ui/badge";
import { Button } from "@/ui/button";
import { Card, CardContent } from "@/ui/card";
import { Text } from "@/ui/typography";

/**
 * 项目标签页 - 千里之行，始于足下
 * 展现用户参与的各类项目，见证成长轨迹
 */
export default function ProjectsTab() {
	const { t } = useLocale();
	// 项目列表 - 各显神通，百花齐放
	const items = [
		{
			icon: <Icon icon="logos:react" size={40} />,
			name: t("sys.pages.management.userProfile.adminTemplate"),
			client: "春风得意公司",
			desc: "时间如白驹过隙，我们助您节约宝贵时光，创造非凡价值…",
			members: fakeAvatars(5),
			startDate: dayjs(faker.date.past({ years: 1 })),
			deadline: dayjs(faker.date.future({ years: 1 })),
			messages: 236,
			allHours: "98/135",
			allTasks: faker.number.int({ min: 60, max: 99 }),
			closedTasks: faker.number.int({ min: 30, max: 60 }),
		},
		{
			icon: <Icon icon="logos:vue" size={40} />,
			name: t("sys.pages.management.userProfile.appDesign"),
			desc: "应用设计融合用户界面与体验设计，创造完美交互。",
			client: "花好月圆科技",
			members: fakeAvatars(7),
			startDate: dayjs(faker.date.past({ years: 1 })),
			deadline: dayjs(faker.date.future({ years: 1 })),
			messages: 236,
			allHours: "880/421",
			allTasks: faker.number.int({ min: 60, max: 99 }),
			closedTasks: faker.number.int({ min: 30, max: 60 }),
		},
		{
			icon: <Icon icon="logos:figma" size={40} />,
			name: t("sys.pages.management.userProfile.figmaDashboard"),
			desc: "使用此模板组织您的设计项目，核心功能包括…",
			client: "山水相逢工作室",
			members: fakeAvatars(3),
			startDate: dayjs(faker.date.past({ years: 1 })),
			deadline: dayjs(faker.date.future({ years: 1 })),
			messages: 236,
			allHours: "1.2k/820",
			allTasks: faker.number.int({ min: 60, max: 99 }),
			closedTasks: faker.number.int({ min: 30, max: 60 }),
		},
		{
			icon: <Icon icon="logos:html-5" size={40} />,
			name: t("sys.pages.management.userProfile.createWebsite"),
			desc: "网站域名应当体现您的产品或服务特色，让客户一见倾心…",
			client: "竹报平安集团",
			members: fakeAvatars(11),
			startDate: dayjs(faker.date.past({ years: 1 })),
			deadline: dayjs(faker.date.future({ years: 1 })),
			messages: 236,
			allHours: "142/420",
			allTasks: faker.number.int({ min: 60, max: 99 }),
			closedTasks: faker.number.int({ min: 30, max: 60 }),
		},
		{
			icon: <Icon icon="logos:adobe-xd" size={40} />,
			name: t("sys.pages.management.userProfile.logoDesign"),
			desc: "顶级设计师倾力打造的精美标识，塑造企业品牌形象。",
			client: "梅兰竹菊有限公司",
			members: fakeAvatars(5),
			startDate: dayjs(faker.date.past({ years: 1 })),
			deadline: dayjs(faker.date.future({ years: 1 })),
			messages: 232,
			allHours: "580/445",
			allTasks: faker.number.int({ min: 60, max: 99 }),
			closedTasks: faker.number.int({ min: 30, max: 60 }),
		},
	];
	return (
		<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
			{items.map((item) => (
				<Card key={item.name} className="flex w-full flex-col">
					<CardContent>
						<header className="flex w-full items-center">
							{item.icon}

							<div className="flex flex-col">
								<Text variant="body1" className="ml-4">
									{item.name}
								</Text>
								<Text variant="caption" className="ml-4">
									{t("sys.pages.management.userProfile.client")}: {item.client}
								</Text>
							</div>

							<div className="ml-auto flex opacity-70">
								<Button variant="ghost" size="icon">
									<Icon icon="fontisto:more-v-a" size={18} />
								</Button>
							</div>
						</header>

						<main className="mt-4 w-full">
							<div className="my-2 flex justify-between">
								<Text variant="body1">
									{t("sys.pages.management.userProfile.startDate")}:
									<Text variant="caption" className="ml-2">
										{item.startDate.format("YYYY年MM月DD日")}
									</Text>
								</Text>

								<Text variant="body1">
									{t("sys.pages.management.userProfile.deadline")}:
									<Text variant="caption" className="ml-2">
										{item.deadline.format("YYYY年MM月DD日")}
									</Text>
								</Text>
							</div>
							<span className="opacity-70">{item.desc}</span>
						</main>

						<footer className="flex w-full  flex-col items-center">
							<div className="mb-4 flex w-full justify-between">
								<span>
									<Text variant="body1">{t("sys.pages.management.userProfile.allHours")}:</Text>
									<Text variant="caption" className="ml-2">
										{item.allHours}
									</Text>
								</span>

								<Badge variant="warning">
									还有 {item.deadline.diff(dayjs(), "day")} {t("sys.pages.management.userProfile.daysLeft")}
								</Badge>
							</div>
							<div className="flex w-full ">
								<AvatarGroup max={{ count: 3 }} size="small">
									{item.members.map((memberAvatar) => (
										<Avatar key={memberAvatar}>
											<AvatarImage src={memberAvatar} />
										</Avatar>
									))}
								</AvatarGroup>

								<div className="ml-auto flex items-center opacity-50">
									<Icon icon="solar:chat-round-line-linear" size={24} />
									<Text variant="subTitle2" className="ml-2">
										{item.messages}
									</Text>
								</div>
							</div>
						</footer>
					</CardContent>
				</Card>
			))}
		</div>
	);
}
